<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/static/layui/css/layui.css" type="text/css" rel="stylesheet">
</head>
<body>
<form>
    <div class="demoTable">
        搜索：
        <div class="layui-inline">
            <input class="layui-input" name="nickName" id="nickName" autocomplete="off" placeholder="输入用户名">
        </div>
        <div class="layui-inline">
            <input class="layui-input" name="phone" id="phone" autocomplete="off" placeholder="输入手机号">
        </div>
        <button class="layui-btn" data-type="reload" type="button">搜索</button>
    </div>
    <table id="checkUser-form" lay-filter="test"></table>
</form>
</body>
<script src="${pageContext.request.contextPath}/static/js/jquery3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;

    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="check">审核</a>
</script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        let form = layui.form;
        //第一个实例
        table.render({
            elem: '#checkUser-form'
            , url: '${pageContext.request.contextPath}/user/getUsers.handler?isCheck=true' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: '编号', width: "20%", sort: true},
                {field: 'nickName', title: '用户名', width: "20%"},
                {field: 'phone', title: '手机号码', width: "20%"},
                {fixed: 'right', title: '操作', width: "20%", toolbar: '#barDemo'}
            ]],
            id: "checkUser-form"
        });

        //顶部筛选监听
        var $ = layui.$, active = {
            reload: function () {

                //执行重载
                table.reload('checkUser-form', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        nickName: $("#nickName").val(),
                        phone: $("#phone").val()
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'check') {

                let id = data.id;
                let nickName = data.nickName;
                layer.open({
                    type: 2,
                    title: nickName + '的详细信息:',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['380px', '80%'],
                    content: '${pageContext.request.contextPath}/userPage/detail.handler?id=' + id, //iframe的url，
                });
            }
        })
    });
</script>
</html>
